<template>
	<view>
		<!-- 登录文字展示区域 -->
		<view class="loginWord">登录</view>
		<!-- 输入框展示区域 -->
		<view class="inputBig">
			<view class="inputCon">
				<input @input="registerButton" class="phoneInput" placeholder="手机号" maxlength="11" type="number" placeholder-style="color:#999999;font-size:32rpx" v-model="phone"/>
				<image src="@/static/images/other/clear.png" @click="cleanInput()"></image>
			</view>
			<view class="inputCon">
				<input @input="registerButton" class="phoneInput" placeholder="密码" maxlength="18" type="text" :password="!eyeOpen" placeholder-style="color:#999999;font-size:32rpx" v-model="password"/>
				<image src="@/static/images/other/eye_open.png" @click="changeEye(false)" v-if="eyeOpen"></image>
				<image src="@/static/images/other/eye_close.png" @click="changeEye(true)" v-if="!eyeOpen"></image>
			</view>
		</view>
		<!-- 隐私协议展示 -->
		<!-- <view class="privacy">
			<view class="otherWord">登录代表你已同意</view>
			<view class="agreement">轻松单词用户协议</view>
			<view class="otherWord">和</view>
			<view class="agreement">隐私政策</view>
		</view> -->
		<!-- 登录按钮 -->
		<view class="loginButton" :style="{backgroundColor: verifyAllStatus ? '#124EE6' : '#A5BBF2'}" @click="login">
			<view class="loginWord">登录</view>
		</view>
		<!-- 忘记密码和立即注册 -->
		<view class="lose">
			<view class="container">
				<view class="forgot" @click="toForgot">忘记密码</view>
				<view class="spe"></view>
				<view class="register" @click="toRegister">立即注册</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {login} from "@/api/loginApi.js";
	import {havePlan} from "@/api/planApi.js";
	import popup from "@/components/popup.vue";
	import {getSkin} from "@/api/skin.js";
	export default {
		data() {
			return {
				phone:"",
				password:"",
				eyeOpen:false,
				verifyAllStatus:false,
			};
		},
		mounted() {
			const phone = uni.getStorageSync("phone");
			this.phone = phone;
		},
		methods:{
			cleanInput(){
				this.phone = "";
			},
			changeEye(status){
				this.eyeOpen = status;
			},
			toForgot(){
				uni.navigateTo({
					url:"/pages/forgot/forgot"
				})
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/register/register"
				})
			},
			
			/**
			 * 验证参数格式
			 */
			_verifyAll(){
				if (this.phone.length != 11){
					this.$refs.popup._popWarn("手机号格式错误");
					return false;
				}
				if (this.password.length < 6 || this.password.length > 18){
					this.$refs.popup._popWarn("密码长度不符合规定");
					return false;
				}
				return true;
			},
			
			/**
			 * 注册按钮背景判断
			 */
			registerButton(){
				if (this.phone.length != 11){
					this.verifyAllStatus = false;
					return false;
				}
				if (this.password.length < 6 || this.password.length > 18){
					this.verifyAllStatus = false;
					return false;
				}
				this.verifyAllStatus = true;
				return true;
			},
			
			/**
			 * 用户登录
			 */
			async login(){
				let ans;
				ans = this._verifyAll();
				if (!ans) return;
				
				ans = (await login(this.phone,this.password)).data;
				console.log(ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				
				uni.setStorageSync("phone",this.phone);
				uni.setStorageSync("token",ans.data.token);
				/**
				 * 获取用户主题色
				 */
				if (uni.getStorageSync("color") == '') { //主题色为空
					// 获取当前主题色
					ans = (await getSkin()).data;
					console.log("getSkin",ans);
					if (ans.code != 200) {
						this.$refs.popup._popError(ans.error);
						return;
					}
					uni.setStorageSync("color",JSON.stringify(ans.data));
				};
				// 如果用户已经设置计划跳到主页,否则跳到设置计划页
				ans = (await havePlan()).data;
				console.log("havePlan:",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				if (ans.data) {
					getApp().globalData.switchIndex = true;
					uni.switchTab({
						url:"/pages/index/index",
					})
				} else {
					uni.navigateTo({
						url:"/pages/plan/plan",
					})
				}
				
			}
		},
		components:{popup},
	}
</script>

<style lang="scss" scoped>
	page{
		margin-top: 40rpx;
	}
	//登录文字展示区域
	.loginWord{
		margin: 10rpx $both-sides 0 $both-sides;
		font-size: 40rpx;
		font-weight: 600;
	}
	
	//输入框展示区域
	.inputBig{
		margin: 100rpx $both-sides 0 $both-sides;
		
		.inputCon{
			padding-left: 12rpx;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: solid $border-color $border-size;
			
			input{
				font-size: 32rpx;
				width: calc(100% - 30rpx);
				
			}
			
			image{
				padding-left: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.inputCon:nth-child(2){
			margin-top: 40rpx;
		}
	}
	
	//隐私协议展示
	.privacy{
		margin: 60rpx $both-sides 0 $both-sides;
		font-size: 22rpx;
		color: #999999;
		display: flex;
		
		.agreement{
			padding: 0 4rpx;
			color: black;
		}
	}
	//登录按钮
	.loginButton{
		margin: 60rpx $both-sides 0 $both-sides;
		height: 90rpx;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.loginWord{
			height: 90rpx;
			line-height: 90rpx;
			font-weight: 500;
			color: white;
			font-size: 30rpx;
		}
	}
	
	//忘记密码和立即注册
	.lose{
		margin: 40rpx $both-sides 0 $both-sides;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.forgot{
				font-size: 24rpx;
				color: #2962F6;
				padding-right: 40rpx;
			}
			.spe{
				width: 4rpx;
				height: 24rpx;
				background-color: #999999;
			}
			.register{
				font-size: 24rpx;
				color: #2962F6;
				padding-left: 40rpx;
			}
		}
	}
	
	
</style>
